<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="shortcut icon" href="../img/logo.ico">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dickies官方网站</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <header>

    </header>
    <section>
        <div id="top">
            <div id="lunbo"></div>
            <button id="btn1"><img src="../img/prev.png" alt=""></button>
            <button id="btn2"><img src="../img/next.png" alt=""></button>
        </div>
        <div id="adv1">
            <a href="" role="button"><img src="../img/man.jpg" alt=""></a>
            <a href="" role="button"><img src="../img/women.jpg" alt=""></a>
        </div>
        <div id="adv2">
            <p class="newStore">新品推荐</p>
            <p class="shift"><button id="manClo">男装</button>/<button id="womanClo">女装</button> </p>



        </div>
        <div id="change">
            <a href=""> <img class="changePrev" src="../img/changePrev.png" alt=""></a>

            <ul>
                <li>
                    <a href=""><img src="../img/m1.jpg" alt=""></a>
                    <p>男士刺绣短袖T恤</p>

                </li>

                <li>
                    <a href=""><img src="../img/m2.jpg" alt=""></a>
                    <p>Dickies男士多袋短袖T恤</p>
                </li>
                <li>
                    <a href="mask.html"><img src="../img/m3.jpg" alt=""></a>
                    <p>Dickies男士休闲圆领短袖T恤</p>
                </li>
                <li>
                    <a href=""><img src="../img/m4.jpg" alt=""></a>
                    <p>Dickies男士休闲短裤</p>
                </li>
            </ul>
            <a href=""> <img class="changeNext" src="../img/changeNext.png" alt=""></a>
        </div>
        <div id="dynamic">
            <div class="dynamic_move">品牌动态</div>
            <div id="dynamic_img">
                <ul>
                    <li>
                        <a href=""><img src="../img/action3.png" alt=""></a>
                        <p>为城市打上绚烂的补丁</p>
                    </li>
                    <li>
                        <a href=""><img src="../img/action1.jpg" alt=""></a>
                        <p>一秒“爷青回”</p>
                    </li>
                    <li>
                        <a href=""><img src="../img/action2.jpg" alt=""></a>
                        <p>哎呀，我可真是越老越fashion</p>
                    </li>
                    <li>
                        <a href=""><img src="../img/action4.png" alt=""></a>
                        <p>你的Flag还飘着吗？</p>
                    </li>
                    <li>
                        <a href=""><img src="../img/action5.jpg" alt=""></a>
                        <p>亦柔亦刚，不愧是女神!</p>
                    </li>
                </ul>

            </div>
        </div>
        <div id="cooperation">
            <img src="../img/banner1.jpg" alt="">
            <img src="../img/banner2.jpg" alt="">
        </div>
        <div id="more">
            <a href=""><img src="../img/more.jpg" alt=""></a>
        </div>

    </section>
    <footer>

    </footer>
</body>

</html>
<script src="jQuery.js">
</script>
<script>
    $("header").load("header.html");
    $("footer").load("footer.html");
    $(window).scroll(function() {
        if (scrollY > 80) {
            $("#top_bar").css({
                display: "block"
            })
        } else {
            $("#top_bar").css({
                display: "none"
            })
        }
    })
    let i = 4;
    $("#btn1").click(function() {
        if (i > 1) {
            $("#lunbo").css(
                'background-image', 'url(../img/lunbo' + i + '.jpg)');
            i--;
        } else {
            $("#lunbo").css(
                'background-image', 'url(../img/lunbo' + i + '.jpg)');
            i = 4;
        }
        console.log(i)
    })
    let j = 1;
    $("#btn2").click(function() {

        if (j < 4) {
            $("#lunbo").css(
                'background-image', 'url(../img/lunbo' + j + '.jpg)');
            j++;
        } else {
            $("#lunbo").css(
                'background-image', 'url(../img/lunbo' + j + '.jpg)');
            j = 1;
        }

    })
    let m = 1;

    function action() {

        if  (m  <  4)  {                        
            m++;                        
            $("#lunbo").css('background-image', 'url(../img/lunbo'  +  m  +  '.jpg)');                    
        } 
        else  {                                           
            $("#lunbo").css('background-image', 'url(../img/lunbo1.jpg)');
            m  =  1;                    
        }
    }
    var timer = setInterval(function() {
        action()
    }, 5000);
    $("#lunbo").mouseenter(
        function() {
            clearInterval(timer);

        })
    $("#lunbo").mouseleave(
        function() {
            timer = setInterval(action, 2000)
        }
    )
</script>